<template>
  <el-container style="min-height: 100vh;">
    <el-header style="padding: 0;">
      <div style="display: flex;height: 100%;justify-content: space-between;">
        <div style="width: 200px;background-color: #fff;">
          <img src="../assets/5.png"  height="60px" alt="">
        </div>
        <div style="align-content: center;font-weight: bold;">药云记管理后台系统</div>
        <div style="padding-right: 30px;display: flex;align-items: center;color: #fff;">
          <img v-if="!$store.state.user.headImage" src="../assets/ab0b3f0.png" style="width: 40px;border-radius: 50%;margin-right: 10px;" alt="">
          <img :src="$api+$store.state.user.headImage" v-else style="width: 40px;border-radius: 50%;margin-right: 10px;" alt="">
          <el-dropdown>
            <span class="el-dropdown-link" style="cursor: pointer;display: inline-block;height: 44px;line-height: 44px;color: #fff;">Hi,{{$store.state.user.userName}},欢迎您</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="pwdFlag=true">修改密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div style="margin-left: 30px;cursor: pointer;border-left: 1px solid #ddd;padding-left: 30px;"><i @click="logOut"
              class="el-icon-switch-button"></i></div>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu router :collapse="isCollapse" class="el-menu-vertical-demo" background-color="#1f2130" text-color="#fff"
          style="height: calc(100vh - 60px);overflow: hidden;" :default-active="$route.path">
          <el-menu-item index="/home">
            <i class="el-icon-s-home" style="margin-right: 0;"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/user">用户列表</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>
              <span>题库管理</span>
            </template>
            <el-menu-item index="/category">分类信息</el-menu-item>
            <el-menu-item index="/problem">关卡题目</el-menu-item>
            <el-menu-item index="/answer">记忆题目</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-finance"></i>
              <span>关卡管理</span>
            </template>
            <el-menu-item index="/level">关卡挑战</el-menu-item>
            <el-menu-item index="/memory">记忆挑战</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/school">学校管理</el-menu-item>
            <el-menu-item index="/banner">轮播管理</el-menu-item>
            <el-menu-item index="/searchList">药品信息管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <el-dialog :visible.sync="pwdFlag" width="33%" @close="pwdClose">
      <div slot="title">修改密码</div>
      <div style="padding: 0 40px;">
        <el-form label-width="80px" :model="pwd" ref="pwdForm" :rules="pwdRules">
          <el-form-item label="原始密码" prop="oldPassword">
            <el-input show-password placeholder="请输入原始密码" v-model="pwd.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password">
            <el-input show-password placeholder="请输入新密码" v-model="pwd.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input show-password placeholder="请输入确认密码" v-model="pwd.confirmPassword"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" style="text-align: center;">
        <el-button @click="pwdClose" style="background-color: rgb(240,240,240);width: 120px;">取 消</el-button>
        <el-button type="primary" @click="pwdConfirm" style="width: 120px;">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>
<script>
  import Cookies from "js-cookie"
  export default {
    name: 'layout',
    data() {
      let validateConfirm = (rule, value, callback) => {
        if (value !== this.pwd.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        time: "2023-04-04 00:00:00 星期一",
        pwdFlag: false,
        timer: 0,
        isCollapse: false,
        pwd: {
          oldPassword: '',
          password: '',
          confirmPassword: ""
        },
        pwdRules: {
          oldPassword: [{
            message: '请输入原始密码',
            trigger: 'blur',
            required: true
          }],
          password: [{
            message: '请输入新密码',
            trigger: 'blur',
            required: true
          }],
          confirmPassword: [{
            message: '请输入确认密码',
            trigger: 'blur',
            required: true
          }, {
            validator: validateConfirm,
            trigger: 'blur'
          }]
        },
        userInfo: {}
      }
    },
    methods: {
      run() {
        let now = new Date(),
          weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; //获取系统当前时间
        let year = now.getFullYear(),
          month = now.getMonth() + 1,
          date = now.getDate(),
          day = now.getDay(),
          week = weeks[day],
          hour = now.getHours(),
          minutes = now.getMinutes(),
          seconds = now.getSeconds();
        month = month < 10 ? "0" + month : month;
        date = date < 10 ? "0" + date : date;
        hour = hour < 10 ? "0" + hour : hour;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds
        this.time = year + "-" + month + "-" + date + " " + hour + ":" + minutes + ":" + seconds + " " + week;
      },
      logOut() {
        this.$post("/user/logout").then(res => {
          if (res.code == 200) {
            this.$store.commit("reset")
            this.$message.success("退出登录成功")
            localStorage.clear()
            Cookies.remove('token')
            this.$router.push("/login")
          }
        })
      },
      pwdClose() {
        this.pwdFlag = false
        this.pwd = {
          oldPassword: '',
          password: '',
          confirmPassword: ""
        }
      },
      pwdConfirm() {
        this.$refs['pwdForm'].validate(flag => {
          if (flag) {
            //修改密码请求
          }
        })
      }
    },
    mounted() {
      setTimeout(this.run, 100)
      this.timer = setInterval(this.run, 1000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
    }
  }
</script>
<style scoped lang='scss'>
  .el-header {
    background-color: #1f2130;
    color: #fff;
    line-height: 60px;
    text-align: center;
  }

  >>>.el-dialog__header {
    background-color: #59AAFC;
    padding: 15px;
    color: #fff;
  }
  >>>.el-icon-close {
    color: #fff;
  }

  .el-aside {
    background-color: #1f2130;
    color: #fff;
  }

  .el-main {
    background-color: #f7f7f7;
  }

  .el-menu {
    border-right: none;
  }
</style>
